<template>
	<div class="faq">
		<list-title :data="header"></list-title>
		<el-form :model="faqForm" :rules="rules" ref="faqForm" label-width="200px">
			<el-form-item label="问题" prop="data.question" style="width: 880px;">
				<el-input v-model="faqForm.data.question" placeholder="问题"></el-input>
			</el-form-item>
			<el-form-item label="回答" prop="data.answer">
				<ueditor-oss :domain="this.$domain.im" 
				:appid="$route.query.appid"
				:value="faqForm.data.answer" 
				:config="ueditor.config" 
				:id="'0'" 
				ref="ue">
				</ueditor-oss>
			</el-form-item>
			<el-form-item label="是否显示" prop="data.display">
				<el-switch v-model="faqForm.data.display"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('faqForm')" :disabled='faqForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='faqForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('faqForm')" v-if='faqForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import {changeToBool} from "static/js/common.js"
import UeditorOss from "pc/common/UeditorOss"

export default {
	inject: ['reload'],
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '添加问答',
				reload: false,
				buttons: [
					{
						title: '问答列表',
						type: 'primary',
						pathName: 'pc/im/instance/faq/FaqList',
						auth: true,
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			/*字段数据*/
			faqForm: {
				submitLock: false,
				data: {
					id: 0,
					question: '',
					answer: '',
					display: true,
				}
			},
			rules: {
				data: {
					question: [
						{ required: true, message: '请输入问题', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					]
				}
			},
			ueditor: {
				config: {}
			}
		};
	},
	components: {
		ListTitle,
		UeditorOss
	},
	created: function() {
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getFaq(this.$route.query.id)
		}
	},
	methods: {
		/*取出需要修改的数据*/
		getFaq: function(){
			this.header.title = '编辑问答'
			/*取出需要修改的数据*/
			this.faqForm.submitLock = true;
			this.$baseURL(this.$domain.im)
			this.$get(this.$api.modifyFaq, {
				appid: this.appid,
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.faqForm.data.id = res.data.data.id
					this.faqForm.data.question = res.data.data.question
					this.faqForm.data.answer = res.data.data.answer
					this.faqForm.data.display = changeToBool(res.data.data.display)
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.faqForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.faqForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.faqForm.data.answer = this.$refs.ue.getUEContent()
						// console.log(this.faqForm.data)
						// return
						this.faqForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addFaq//默认是添加
						if(this.faqForm.data.id > 0){//修改
							apiUrl = this.$api.modifyFaq
						}
						/*添加菜单*/
						this.$baseURL(this.$domain.im)

						let data = JSON.parse(JSON.stringify(this.faqForm.data))

						this.$post(apiUrl, {
							appid: this.appid,
							Faq: data,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.faqForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.faqForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		}
	}
};
</script>

<style lang="stylus" scoped>
.faq
	form
		margin-top: 10px
/*Ueditor行高有问题*/
/deep/ .edui-default .edui-toolbar .edui-combox .edui-combox-body
		line-height: 20px !important
/deep/ .edui-default .edui-button-body
		line-height: 20px !important
/deep/ .edui-splitbutton-body
		line-height: 20px !important
/deep/ .edui-menubutton-body
		line-height: 20px !important
/*Ueditor 下拉箭头偏右*/
/deep/ .edui-default .edui-toolbar .edui-combox-body .edui-arrow
		background-position: -742px 0px
</style>